<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试播放</title>
    <style>
        /* 通配符清除所有样式 */
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        /* test元素宽高500居中显示 */
        .test {
            width: 500px;
            height: 500px;
            margin: 200px auto;
        }
    </style>
</head>

<body>
    <div class="test">
        <video id="video" width="100%" height="100%" controls></video>
    </div>
</body>
<script src="./hls.js"></script>
<script>
    if (Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
            hls.loadSource('https://humble-man.gitee.io/accumulation/iptvTest.m3u');
            hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                console.log('----解析资源----', data);
            });
        });

        hls.on(Hls.Events.ERROR, function (event, data) {
            if (data.fatal) {
                switch (data.type) {
                    case Hls.ErrorTypes.NETWORK_ERROR:
                        // try to recover network error
                        console.log('fatal network error encountered, try to recover');
                        hls.startLoad();
                        break;
                    case Hls.ErrorTypes.MEDIA_ERROR:
                        console.log('fatal media error encountered, try to recover');
                        hls.recoverMediaError();
                        break;
                    default:
                        // cannot recover
                        hls.destroy();
                        break;
                }
            }
        });
    }
</script>

</html>